<template>
  <div>
    <h1>选择发动机</h1>
    <div class="car">
      <h3>你的汽车</h3>
      <ul>
        <li>发动机名：{{car.carEngine.engineName}}</li>
        <li>外壳颜色：{{car.carShell.shellColor}}</li>
        <li>总价格：{{car.summaryPrice}}</li>
      </ul>
      发动机名字：<input type="text" v-model="engineForm.engineName" /><br/>
      发动机价格：<input type="text" v-model="engineForm.enginePrice" /><br/>
      <button @click="clickHandler">点击按钮获取数据</button>
    </div>
    <router-link to="/shell">下一步</router-link>
  </div>
</template>

<script setup>
// ----------------------导入区----------------------
import carStore from "../config/store.js";
import {reactive} from "vue";

// ----------------------数据区----------------------
let car = carStore();
let engineForm = reactive({});

// ----------------------功能区----------------------
const clickHandler = () => {
  // 这里的操作证明 Pinia 中的数据可以做写操作
  car.carEngine.engineName = engineForm.engineName;
  car.carEngine.enginePrice = engineForm.enginePrice;
}
</script>

<style scoped>
.car {
  border: 1px dashed black;
  width: 500px;
  height: 300px;
}

button {
  border: 1px dashed black;
}
</style>